<template>
  <div style="width: 100%; height: 100%">
    <div class="item-title">
      <span style="margin: auto 0">{{ title }}</span>
    </div>
    <div class="item-box" id="trafficmonitorChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "trafficmonitorChart",
  props: {
    title: {
      type: String,
      default: '各省流量监测数据'
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      citynameList: ["北京", "天津", "河北", "山西", "内蒙古", "辽宁", "吉林", "黑龙江", "上海", "江苏", "浙江", "安徽", "福建", "江西", "山东", "河南", "湖北", "湖南", "广东", "广西",]
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    getInitialEnd(total) {
      return Math.min(100, Math.round((5 / total) * 100));
    },
    initChart() {
      let myChart = echarts.init(document.getElementById('trafficmonitorChart'));
      const xAxisData = this.citynameList
      const seriesData = [{
        measureUnit: "吨", value: 500
      }, {
        measureUnit: "吨", value: 800
      }, { measureUnit: "吨", value: 400 }, { measureUnit: "吨", value: 300 }]
      let maxAmount = 0;
      seriesData.map((item) => {
        maxAmount = item.value > maxAmount ? item.value : maxAmount;
      });
      let maxValArr = new Array(seriesData.length).fill(maxAmount);
      let options = {
        //你的代码
        legend: {
          show: false,
          icon: "rect",
          textStyle: {
            color: "#93B9FF",
          },
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            fontSize: 11,
            color: "#93B9FF",
            interval: 0,
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#305B9A",
            },
          },
          data: xAxisData,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: 11,
            color: "#93B9FF",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#305B9A",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#0F2E60",
            },
          },
        },
        series: [
          {
            name: "全量背景图",
            type: "bar",
            barGap: "-100%",
            data: maxValArr,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "rgba(63, 169, 245, 0.2)",
              },
            },
            z: 0,
          },
          {
            type: "pictorialBar",
            name: "渐变背景",
            barWidth: 14,
            symbol: "rect",
            symbolSize: "100%",
            symbolPosition: "start",
            symbolOffset: [0, 0],
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: (params) => {
                  return [
                    ...Object.values(seriesData[params.dataIndex]),
                  ].join("\n");
                },
                fontSize: 12,
                lineHeight: 16,
                color: "#93B9FF",
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(221, 255, 252, 1)",
                  },
                  {
                    offset: 0.1,
                    color: "rgba(8, 239, 222, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 128, 167, 0.20)",
                  },
                ]),
              },
            },
            z: 1,
            zlevel: 0,
            data: seriesData.map((item) => {
              return item.value;
            }),
          },
          {
            type: "pictorialBar",
            name: "块状切片",
            itemStyle: {
              normal: {
                color: "#011140",
              },
            },
            barWidth: 14,
            symbolRepeat: 28,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [14, 2],
            symbolPosition: "start",
            symbolOffset: [0, 0],
            data: seriesData.map((item) => {
              return item.value;
            }),
            z: 2,
            zlevel: 0,
          },
        ],
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: this.getInitialEnd(this.citynameList.length),
          filterMode: 'filter',
          zoomOnMouseWheel: false,
          moveOnMouseMove: true,
          moveOnMouseWheel: true
        }]
      };
      myChart.setOption(options);
      window.addEventListener('resize', function() {
        myChart.resize();
      });
    }
  }

}

</script>

<style scoped lang="scss">

$easeTimer: 1;

@function ease-time($easeTimer) {
  @return unquote($easeTimer + 's');
}

@for $i from 1 through 10 {
  .ease#{$i} {
    animation: ease ease-time($easeTimer + $i);
  }
}

@keyframes ease {
  from {
    opacity: 0; // 初始透明度
  }
}

.item-title {
  color: white;
  width: 100%;
  height: 13%;
  display: flex;
  flex-direction: column;
  align-content: center;
}

.item-box {
  width: 100%;
  height: 85%;
}

.flex1 {
  flex: 1;
}
</style>

